<template>
  <div class="classmanage">
    <el-table
      :data="tableData"
      :stripe="true"
      border
      style="width: 100%"
      class="el_table"
      ref="table"
    >
      <el-table-column
        prop="class_name"
        label="文章分类"
        width="150px"
        align="center"
      >
        <template #default="scope">
          <span style="color: skyblue; font-size: 18px">{{
            scope.row.class_name
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="detail" label="简介" :show-overflow-tooltip="true">
        <template #default="scope">
          <span style="color: black; user-select: text; font-size: 13px">{{
            scope.row.detail
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="blog_num"
        label="博客数"
        width="80px"
        align="center"
      >
        <template #default="scope">
          <span style="color: #00d053; font-weight: 600; font-size: 14px">{{
            scope.row.blog_num
          }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150px">
        <template slot-scope="scope">
          <el-button @click="editBtn(scope.row)" type="danger" size="small"
            >编辑</el-button
          >
          <el-button type="danger" size="small" @click="deleteClass(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-button type="danger " @click="addClass">新增分类</el-button>
    <Dialog :dialog="dialog" :formData="formData" @getClass="getClass"></Dialog>
  </div>
</template>

<script>
import { Message } from "element-ui";
import Dialog from "./CreateClassDialog.vue";
export default {
  name: "classmanage",
  created() {
    this.getClass();
    this.getArticle();
  },
  data() {
    return {
      tableData: [],
      //dialog组件所需要用到的两个数据
      dialog: {
        show: false,
        option: "add",
        title: "添加分类",
      },
      formData: {
        class_name: "",
        detail: "",
        blog_num: 0,
        id: "",
      },
    };
  },
  methods: {
    addClass() {
      console.log(this.dialog);
      this.formData.class_name = "";
      this.formData.detail = "";
      this.formData.blog_num = 0;
      this.formData.id = "";

      this.dialog.title = "新增分类";
      this.dialog.option = "add";
      this.dialog.show = true;
    },
    getClass() {
      this.$axios.get("/api/class/getAll").then((res) => {
        this.tableData = res.data.doc;
      });
    },
    getArticle() {
      this.$axios.get("/api/article/getAll").then((res) => {
        // console.log(this.$refs["table"].data);
        //获取表格中的分类名称，初始化obj，再向后端发送请求
        const data = this.$refs["table"].data;
        let obj = {};
        data.forEach((item, index) => {
          obj[item.class_name] = 0;
        });
        console.log("11", obj);
        console.log(res);
        //计算每个分类的文章数，存储再obj中
        res.data.doc.forEach((item, index) => {
          let str = item.class_name;
          console.log(str);
          if (obj[str]) {
            obj[str] += 1;
          } else {
            obj[str] = 1;
          }
        });
        console.log(obj);
        this.$axios.post("/api/class/blogNum", obj).then((res) => {
          console.log(res.data.doc);
          //重新获取分类，刷新分类列表
          this.getClass();
        });
      });
    },
    //修改的按钮
    editBtn(info) {
      console.log(info);
      this.formData.class_name = info.class_name;
      this.formData.detail = info.detail;
      this.formData.blog_num = info.blog_num;
      this.formData.id = info._id;

      this.dialog.option = "edit";
      this.dialog.title = "修改分类";
      this.dialog.show = true;
    },
    //删除的按钮
    deleteClass(info) {
      console.log(info._id);
      this.$axios
        .delete(`/api/class/deleteClass/${info._id}`)
        .then((res) => {
          Message.success({
            message: "删除成功",
          });
          this.getClass();
        })
        .catch((err) => console.log(err));
    },
  },
  components: {
    Dialog,
  },
};
</script>

<style lang="scss">
.classmanage {
  width:100%;
  .el_table {
    width: 100% !important;
    // margin: 20px auto;
    // border-radius: 15px;
    filter: drop-shadow(5px 5px 15px rgba(116, 250, 248, 0.1));
    .table_column {
      font-size: 16px;
      cursor: pointer;
    }
  }
}
</style>